<template>
	<div class="gallary" @click="handleGallaryClose">
		<div class="wrapper">
			<swiper :options="swiperOption">
				<swiper-slide v-for="(item,index) in imgs" :key="index">
					<img class="gallary-img" :src="item" alt="">
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>
<script>

export default{
	props:{
		imgs:{
			type:Array,
			default(){
				return []
			}
		}
	},
	data(){
		return{
			swiperOption:{
				pagination:'.swiper-pagination',
				loop:true,
				paginationType:'fraction',
				observeParents:true,
				observer:true

			}
		}
	},
	methods:{
		handleGallaryClose(){
			this.$emit('close');
		}
	}


}
</script>
<style lang="scss" scoped>
.gallary{
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	top:0;
	right:0;
	bottom: 0;
	left:0;
	z-index: 99;
	background: #000;
}
.wrapper{
	overflow: hidden;
	width:100%;
	height:0;
	padding-bottom: 66%;
	background: #fff;
}
.gallary-img{
	width:100%;
}
.swiper-pagination{
	position: fixed;
	bottom:3rem;
	color:#fff;
}
</style>